import React from 'react';
import { connect } from 'react-redux';
import { ActionSheet, Toast } from 'antd-mobile';
import SubHeaderComponent from '../../../components/subHeader';
import * as Request from '../../../services/user/index';
import config from '../../../assets/js/conf/config';
import Css from '../../../assets/css/user/profile/index.css';

class Profile extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            sHead: require('../../../assets/images/user/my/default-head.png'),
            sHeadFile: '',
            sName: '',
            sGender: '', 
            iGender: 0
        }
        this.headRef = React.createRef();
    }

    componentDidMount(){
        this.getUserInfo();
    }

    //获取用户信息
    getUserInfo(){
        const { uid, isLogin } = this.props.user;
        if(isLogin){
            Request.getUserInfo({ uid }).then(res => {
                if(res.code === 200){
                    const { head, nickname, gender } = res.data;
                    this.setState({ 
                        sHead: !!head ? head : require('../../../assets/images/user/my/default-head.png'),
                        sName: nickname,
                        iGender: Number(gender),
                        sGender: gender === '1' ? '男' : gender === '2' ? '女' : ''
                    })
                }
            });
        }
    }

    //性别选择
    selectGender(){
        const BUTTONS = ['男', '女', '取消'];
        ActionSheet.showActionSheetWithOptions({
        options: BUTTONS,
        cancelButtonIndex: BUTTONS.length - 1, //按钮列表中取消按钮的索引位置
        // destructiveButtonIndex: BUTTONS.length - 2, //按钮列表中破坏性按钮（一般为删除）的索引位置
        title: '请选择性别',
        // message: '请选择性别',
        maskClosable: true,
        'data-seed': 'logId',
        onTouchStart: e => e.preventDefault(),
        },
        (buttonIndex) => {
            if(buttonIndex !== 2){
                this.setState({ 
                    sGender: buttonIndex === 0 ? '男' : buttonIndex === 1 ? '女' : this.state.sGender,
                    iGender: buttonIndex === 0 ? 1 : buttonIndex === 1 ? 2 : this.state.iGender,
                });
            }
        });
    }

    //头像上传
    uploadHead(){
        Request.uploadHeadData({ headfile: this.headRef.current.files[0] }).then(res => {
            if(res.code === 200){
                this.setState({ 
                    sHead: `http://vueshop.glbuys.com/userfiles/head/${res.data.msbox}`,
                    sHeadFile: res.data.msbox
                });
            }else{
                Toast.info(res.data.msbox, 2);
            }
        });
    }

    //个人资料保存
    submitSave(){
        const { sName, sGender, iGender, sHeadFile } = this.state;
        if(sName.match(/^\s*$/)){
            Toast.info('请输入昵称', 2);
            return false;
        }
        if(sGender.match(/^\s*$/)){
            Toast.info('请选择性别', 2);
            return false;
        }
        const params = {
            uid: this.props.user.uid,
            nickname: sName,
            gender: iGender,
            head: sHeadFile
        };
        Request.updateUser(params).then(res => {
            if(res.code === 200){
                Toast.info(res.data, 2, () => {
                    this.props.history.replace(config.path+'home/my');
                });
            }
        });
    }

    render(){
        const { sHead, sName, sGender } = this.state;
        return (
            <div className={Css['page']}>
                <SubHeaderComponent title="个人资料" rightText="保存" onClick={() => this.submitSave()}></SubHeaderComponent>
                <div className={Css['main']}>
                    <ul className={Css['head']}>
                        <li>头像</li>
                        <li>
                            <img src={sHead} alt="loading" />
                            <input type="file" ref={this.headRef} onChange={() => this.uploadHead()} />
                        </li>
                    </ul>
                    <ul className={Css['list']}>
                        <li>昵称</li>
                        <li><input type="text" placeholder="请设置昵称" value={sName} onChange={(e) => this.setState({ sName: e.target.value })} /></li>
                        <li className={Css['arrow']}></li>
                    </ul>
                    <ul className={Css['list']}>
                        <li>性别</li>
                        <li><input type="text" placeholder="请选择性别" readOnly value={sGender} onClick={() => this.selectGender()} /></li>
                        <li className={Css['arrow']}></li>
                    </ul>
                </div>
            </div>
        )
    }
}

export default connect((store) => {
    return store;
})(Profile);